<template>

    <div class="lianxi_box mobileFrom">
       <el-form :id="propValue.fromKey" ref="form" class="from">
    <el-form-item class="flexalign" :class="{'flex':item.label}" :label="item.label" v-for="(item,i) of propValue.fromData" :key="i">
      <el-input  :style="{'background-color':propValue.inputBackground,height:item.height+'rem','border-radius':propValue.borderRadius+'rem'}" :id="propValue.fromKey+item.key"  :name="item.key"  :rule="item.rule" :value="item.value" :placeholder="item.placeholder" :type="item.radio?'text':'textarea'" v-model="item.value">
       <img  v-if="item.icon" slot="prefix" :src="item.icon" style="width:19rem;" alt="">
       </el-input>
    </el-form-item>
    <el-form-item class="flex-center">
      <el-button :style="buttonStyle(propValue)" type="primary" :id="propValue.fromKey+'submit'" class="submitBtn">提交</el-button>
    </el-form-item>
     </el-form>
    </div>

</template>
<script>

 import {validatePhoneReg,Notempty,validateEmail} from '@/utils/validate'
  export default {
   name: 'From',
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
        itemStyle:""
      },
    data() {
      return {

      }
    },
    mounted(){
      this.fromInit(this.propValue.fromKey)
      // /web/contactUs

    },
    methods: {
     buttonStyle(value){
            return{
                width:value.buttonWidth+'rem',
                height:value.buttonHeight+'rem',
                'border-radius':value.buttonRadius,
                background:value.buttonBackground
            }
        },
      fromInit(value) {
      let _this=this
      	// $("#showSubmit").bind("click",function(){
        //   $(`#${value}`).slideToggle()
        // });
        $("#showSubmitedit").bind("click",function(){
          $(`#showSubmitclose`).show()
          $(`#showSubmitedit`).hide()
          $(`.lianxi_box`).addClass('autolianxi').removeClass('hidelianxi')
        });
         $("#showSubmitclose").bind("click",function(){
          $(`#showSubmitclose`).hide()
          $(`#showSubmitedit`).show()
          $(`.lianxi_box`).removeClass('autolianxi').addClass('hidelianxi')
        });

         $(`#${value}submit`).click(function() {
          var d = {};
          var t = $(`#${value}`).serializeArray();
          let boolType=true
          $.each(t, function() {
          let rule= $(`#${value+this.name}`).attr("rule")
            if(rule){
                if(rule=='validatePhoneReg'&&boolType){
                  let bool=validatePhoneReg(this.value)
                 if(bool){
                        d[this.name] = this.value;
                 }else{
                     boolType=false
                   alert('手机号格式错误！');
                    return
                 }
                } else if(rule=='validateEmail'&&boolType){
                  let bool=validateEmail(this.value)
                  if(bool){
                        d[this.name] = this.value;
                 }else{
                     boolType=false
                   alert('邮箱格式错误！');
                    return
                 }
                } else if(rule=='Notempty'&&boolType){
                  let bool=Notempty(this.value)
                  if(bool){
                        d[this.name] = this.value;
                 }else{
                     boolType=false
                   alert('请输入内容');
                    return
                 }
                }
            }
               d[this.name] = this.value;

          });
          if(boolType){
            $.ajax({
              type: "POST",
              url: _this.$BaseUrl+'web/contactUs',
              data:JSON.stringify(d),
              contentType: 'application/json',
              success: function (res) {
                if(res.code==200){
                  alert(res.data)
                }else{
                  alert(res.message)
                }
              }
              })
          }
        });
      }
    }
  }
</script>
<style>
.mobileFrom  .el-input__inner{
    background-color: transparent!important;
    height: 100%;
    padding-left: 45rem;
    border-color: transparent!important;
}
.mobileFrom .el-textarea__inner{
    background-color: transparent!important;
    height: 100%;
    resize:none;
    border-color: transparent!important;
}
.mobileFrom .el-input__prefix{
 display: flex;
 align-items: center;
 margin-left: 13rem;
}
.mobileFrom .el-button--primary{
 border-color:transparent!important;
}
</style>
<style lang="scss" scoped>
.el-button {
background: #5780ea;
}

.lianxi_box{
  width: 100%;
    align-items: center;
    font-size: 20px;
    transition: .3s;
}
.autolianxi{
   border-radius: 0;
   border-top-left-radius:10px;
    border-top-right-radius:10px;
    transition: .3s;
    // top:-300px;
    transform: translateY(-300px);
}
.hidelianxi{
    transition: .3s;
    transform: translateY(0px);
}
#showSubmit{
 cursor: pointer;
 margin-bottom: 10px;
}
.from{
  width: 100%;
  background: #fff;
  padding: 15rem;
}
.submitBtn{
  width: 100px;
}

</style> 
